<script>
    window.onload= function(){
        var oBtn1=document.getElementById("btn1");
        var oBtn2=document.getElementById("btn2");
        var oBox=document.getElementById("box");
        var oImg=document.getElementById("img");
        var oText1=document.getElementById("text1");
        var p1=document.getElementById("p1");
        var oText2=document.getElementById("text2");
        var oPrev=document.getElementById("prev");
        var oNext=document.getElementById("next");
        var arrSrc=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
        var arrTxt=["文案1","文案2","文案3","文案4"];
        var num=0;
        var onOff=true; //true 循环  false 走顺序
        
        function fn(){      //开始先定义一个公共函数方便下面调用
            oImg.src = arrSrc[num];     //图片的显示路径
            oText1.innerHTML= num+1 +"/" + arrTxt.length;   //图中二号位置的数字显示
            oText2.innerHTML=arrTxt[num];   //图中三号位置的文字显示
        }
        fn();/*切记，定义之后，这里一定要调用一下*/

        //循环按钮
        oBtn1.onclick=function(){
            onOff=true;
                p1.innerHTML="图片会循环"

        };
        //顺序按钮
        oBtn2.onclick=function(){
            onOff=false;
                p1.innerHTML = "图片按顺序走"

        };
        oPrev.onclick = function(){
            num--;  //点击左边的箭头那么就是num--
            if(onOff){  //onOff默认是true所以就是走循环了
                if(num==-1){    //在一直减的过程中，数组里最小的就是0，所以等于-1的时候要循环下去所以让它显示最后一张
                    num=arrSrc.length-1;
                }

            }else{  //否则onOff是false所以就是走顺序了
                if(num==-1){     //在一直减的过程中，数组里最小的就是0，所以等于-1的时候没有数据走了，所以让它显示第一张不能点击了
                    num=0;  
                    alert("已经是第一张了")
                }
            }
            fn();//判断好之后记得调用函数
        };
        //相反下面就是点击左边的箭头所做出的判断，道理同上
        oNext.onclick = function(){
            num++;
            if(onOff){
                if(num==arrTxt.length){
                    num=0;
                }
            }else{
                if(num==arrTxt.length){
                    num=arrSrc.length-1;
                    alert("已经是最后一张了")
                }
            }
            fn();
        }
    }
</script>